<template>
  <div v-if="Object.keys(goods).length !== 0" class="zong">
    <div class="title">{{ goods.title }}</div>
    <div class="detail-price">
      <span class="price">{{ goods.price }}</span>
      <del>{{ goods.oldPrice }}</del>
      <!-- <span class="discount">{{ goods.discountDesc }}</span> -->
      <span :class="{ discount: goods.discountDesc !== null }">
        <span>{{ goods.discountDesc }}</span></span
      >
    </div>
    <div class="data">
      <span>{{ goods.columns[0] }}</span> <span>{{ goods.columns[1] }}</span
      ><span>{{ goods.services[0].name }}</span>
    </div>
    <div class="gou">
      <span v-for="item in goods.services.length - 1" :key="item" class="item">
        <img :src="goods.services[item].icon" alt="" />
        <span>{{ goods.services[item].name }}</span>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "DetailBaseInfo",
  props: {
    goods: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style scoped>
.zong {
  margin-left: 5px;
  margin-right: 5px;
}
.title {
  margin-top: 10px;
  font-size: 16px;
}
.detail-price {
  margin-top: 10px;
}
.price {
  margin-right: 3px;
  font-size: 18px;
  color: red;
}
.discount {
  text-align: center;
  padding: 2px 4px;
  margin-left: 3px;
  background: #f13e3a;
  display: inline-block;
  border-radius: 20px;
  color: #fff;
  vertical-align: top;
  font-size: 10px;
}
.data {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 12px;
  display: flex;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  color: #999;
}
.data span {
  flex: 1;
  justify-content: space-around;
  text-align: center;
}
.data span:first-child {
  text-align: left;
}
.data span:last-child {
  text-align: right;
}
.gou {
  display: flex;
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
  box-shadow: 0, 3px, 3px, rgba(0, 0, 0, 0.3);
  margin-top: 15px;
  margin-left: -5px;
  margin-right: -5px;
}
.gou img {
  width: 10px;
}
.gou .item {
  font-size: 12px;
  flex: 1;
  justify-content: space-between;
  text-align: center;
}
.gou .item:first-child {
  padding-left: 5px;
  text-align: left;
}
.gou .item:last-child {
  padding-right: 5px;
  text-align: right;
}
</style>